<script lang="ts">
  import { defineComponent, PropType } from '@vue/composition-api';

  export type PropsType = {
    value: string;
    defaultValue: string[];
    mode: 'date' | 'time' | 'region';
    start: string;
    end: string;
  };

  export default defineComponent({
    props: {
      defaultValue: {
        type: Array as PropType<PropsType['defaultValue']>,
        require: true
      },
      value: {
        type: String as PropType<PropsType['value']>,
        require: true
      },
      mode: {
        type: String as PropType<PropsType['mode']>,
        require: true
      }
    },
    setup(_, { emit }) {
      type PickeEvent = {
        detail: {
          value: string | Array<string>;
        };
      };
      function bindDateChange(e: PickeEvent) {
        let value = e.detail.value;
        if (_.mode === 'region') {
          value = (e.detail.value as string[]).join('，');
        }
        emit('input', value);
      }
      return {
        bindDateChange
      };
    }
  });
</script>

<template>
  <picker class="oto-picker" :value="defaultValue" :mode="mode" :start="start" :end="end" @change="bindDateChange">
    <slot></slot>
  </picker>
</template>

<style lang="scss" scoped>
  .oto-picker {
  }
</style>
